﻿@inject IJSRuntime JS

@if (currentAudio != null)
{
    <div class="d-flex">
        @if ((string.IsNullOrWhiteSpace(currentAudio.Thumbnail) == false && currentAudio.Thumbnail.Contains("default"))==false)
        {
            <div class="me-4">
                <CnGalWebSite.Components.Images.MasaImage Src="@currentAudio.Thumbnail" Alt="@currentAudio.Name" Style="width:150px;height:150px;" Type="ImageType.Audio"/>
            </div>
        }

        <div class="w-100">
            <div class="mb-4">
                <MBorder  Style="border-radius:0;margin: auto 0;" Width="@("4px")">
                    <div class="ms-4">
                        <div class="h6 fw-bold mb-0">@currentAudio.Name</div>
                        @if (string.IsNullOrWhiteSpace(currentAudio.BriefIntroduction) == false)
                        {
                            <div style=" color: gray; " class="text-truncate-1 mt-2">@currentAudio.BriefIntroduction</div>
                        }

                    </div>
                </MBorder>

            </div>
            <MSimpleTable Class=" overflow-auto" Style="max-height:150px;background-color:transparent">
                <tbody>
                    @{ int index = 0; }
                    @foreach (var item in Model.OrderByDescending(s => s.Priority))
                    {
                        <tr class="@(item==currentAudio?"primary-textfw-bold":"")" @key="item.Url" @onclick="@(()=>OnClick(item))">
                            <td class="p-0" style="height: 30px; width: 0px;"><MIcon Style="@(item== currentAudio?"color:var(--main-color)!important;":"")" Size="@("20px")">mdi-play-box</MIcon></td>
                            <td style="height:30px; ">
                                <div  class="text-truncate-1">
                                    @($"{++index}. {item.Name}" )
                                </div>
                            </td>
                            <td style="height: 30px; display: flex; justify-content: flex-end; align-items: center;">
                                @(item.Duration.TotalMinutes.ToString("0") + ":"+(item.Duration.TotalSeconds%60).ToString("00"))
                            </td>
                        </tr>
                    }
                </tbody>
            </MSimpleTable>
        </div>
    </div>
    <hr class="mt-3 mb-3">
    <MasaAudio Src="@currentAudio.Url" AutoPlay="AutoPlay" Class="w-100" />

}
@code {
    [Parameter]
    public List<EditAudioAloneModel> Model { get; set; }

    public bool AutoPlay { get; set; } = false;

    EditAudioAloneModel currentAudio;
    List<EditAudioAloneModel> _model;


    protected override void OnParametersSet()
    {
        if (_model != Model)
        {
            _model = Model;
            currentAudio = Model.FirstOrDefault();
        }
        AutoPlay = false;

    }
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender)
        {
            try
            {
                await JS.InvokeAsync<string>("playAudio", null);
            }
            catch (Exception ex)
            {

            }
        }

    }
    public void OnClick(EditAudioAloneModel model)
    {
        if (currentAudio == model)
        {
            
        }
        currentAudio = model;
        AutoPlay = true;
        StateHasChanged();
        

    }

}
